/* Navigation overlay - positioned on sides */
.vuefinder__preview-modal__nav-overlay {
  @apply pointer-events-none absolute inset-0 z-10;
}

.vuefinder__preview-modal__nav-side {
  @apply pointer-events-auto absolute top-1/2 flex h-12 w-12 -translate-y-1/2 transform items-center justify-center rounded-full bg-black/50 text-white shadow-lg transition-all duration-200 hover:bg-black/70 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-30;
}

.vuefinder__preview-modal__nav-side--left {
  @apply left-4;
}

.vuefinder__preview-modal__nav-side--right {
  @apply right-4;
}

.vuefinder__preview-modal__nav-side:not(:disabled):hover {
  @apply -translate-y-1/2 scale-110 transform;
}

.vuefinder__preview-modal__nav-icon {
  @apply h-6 w-6;
}

/* Responsive navigation */
@media (max-width: 768px) {
  .vuefinder__preview-modal__nav-side {
    @apply h-10 w-10;
  }

  .vuefinder__preview-modal__nav-side--left {
    @apply left-2;
  }

  .vuefinder__preview-modal__nav-side--right {
    @apply right-2;
  }

  .vuefinder__preview-modal__nav-icon {
    @apply h-5 w-5;
  }
}

@media (max-width: 480px) {
  .vuefinder__preview-modal__nav-side {
    @apply h-8 w-8;
  }

  .vuefinder__preview-modal__nav-side--left {
    @apply left-1;
  }

  .vuefinder__preview-modal__nav-side--right {
    @apply right-1;
  }

  .vuefinder__preview-modal__nav-icon {
    @apply h-4 w-4;
  }
}

/* Focus states for accessibility */
.vuefinder__preview-modal__nav-side:focus {
  @apply ring-2 ring-blue-500 ring-offset-2 outline-none;
}

/* Disable focus outline for modal content */
.vuefinder__preview-modal:focus {
  @apply outline-none;
}

.vuefinder__preview-modal__content:focus {
  @apply outline-none;
}

.vuefinder__preview-modal__content {
  @apply mt-3 w-full sm:mt-0 sm:text-left;
}

.vuefinder__preview-modal__loading {
  @apply text-sm text-(--vf-text-primary);
}

.vuefinder__preview-modal__spinner {
  @apply mr-3 -ml-1 h-5 w-5 animate-spin text-(--vf-text-primary);
}

.vuefinder__preview-modal__spinner-circle {
  @apply opacity-25;
  stroke: var(--vf-text-primary);
}

.vuefinder__preview-modal__spinner-path {
  @apply opacity-75;
}

.vuefinder__preview-modal__details {
  @apply flex rounded py-2 text-xs font-normal break-all text-(--vf-text-primary);
}

.vuefinder__preview-modal__note {
  @apply text-xs text-(--vf-text-secondary);
}
